<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>01.揉捏div</title>
		<style>
			body {
				background: rgb(233, 231, 231);
			}
			
			.wrap button {
				width: 120px;
				height: 40px;
				font: bold 16px/40px "宋体";
				text-align: center;
				color: #fff;
				background: red;
				border: none;
				padding: 0;
				margin: 0;
				margin-left: 20px;
			}
			
			#box {
				width: 100px;
				height: 100px;
				background: #fff;
				border: 4px solid #000;
			}
			
			.mask {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, .5);
				display: none;
			}
			
			.select {
				width: 400px;
				height: 260px;
				background: #fff;
				border: 20px solid #999;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -130px;
			}
			
			ul {
				list-style: none;
				margin: 0;
				padding: 10%;
			}
			
			.setList li {
				height: 30px;
				font: 14px / 30px "宋体";
				margin-top: 10px;
			}
			
			.setList span {
				float: left;
			}
			
			.setList span:not(.title) {
				width: 40px;
				height: 30px;
				border: 1px solid #000;
				margin: 0 5px;
				text-align: center;
				background: #e7e2e286;
				color: #333;
			}
			
			#red {
				background: red;
			}
			
			#yellow {
				background: orange;
			}
			
			#blue {
				background: skyblue;
			}
			
			.setList li:first-of-type span:not(.title) {
				color: #fff;
			}
			
			.select button {
				width: 80px;
				height: 30px;
				font: 14px / 30px "宋体";
				color: #fff;
				text-align: center;
				background: rgb(63, 47, 153);
				border: none;
			}
			
			.select button:first-of-type {
				margin-left: 28%;
			}
		</style>
		<script>
			window.onload = function () {
				// 先获取外层的wrap
				var oWrap = document.querySelectorAll(".wrap")[0];
				var oH2 = oWrap.getElementsByTagName("h2")[0];
				// 确认获取到button按钮之后，才为其添加点击事件
				var oBtn = oH2.getElementsByTagName("button")[0];
				// console.log(oBtn);
				
				// 获取要设置样式的box元素
				var oBox = document.querySelectorAll("#box")[0];
				
				// 获取遮罩层元素
				var oMask = document.querySelector(".mask");	
				// console.log(oMask);
				
				// 获取要设置的元素
				var oRed = document.getElementById("red");
				var oYellow = document.getElementById("yellow");
				var oBlue = document.getElementById("blue");
				
				var oW200 = document.getElementById("w200");
				var oW300 = document.getElementById("w300");
				var oW400 = document.getElementById("w400");
				
				var oH200 = document.getElementById("h200");
				var oH300 = document.getElementById("h300");
				var oH400 = document.getElementById("h400");
				
				var oRecovery = document.querySelectorAll("#recovery")[0];
				var oSure = document.querySelectorAll("#sure")[0];
				
				oBtn.addEventListener("click", function () {
					// alert("您点击了按钮!");
					oMask["style"].display = "block";
				}, false);
				
				oRed.addEventListener("click", function () {
					oBox.style.backgroundColor = 'red';	
				}, false);
				
				oYellow.addEventListener("click", function () {
					oBox["style"].backgroundColor = "yellow";
				}, false);
				
				oBlue.addEventListener("click", function () {
					oBox.style["background"] = "blue";
				}, false);
				
				oW200.onclick = function () {
					oBox.style.width = '200px';
				};
				
				oW300.onclick = function () {
					oBox.style.width = '300px';
				};
				
				oW400.onclick = function () {
					oBox.style.width = '400px';
				};
				
				oH200.addEventListener("click", function () {
					oBox.style["height"] = "200px";					
				}, false);
				
				oH300.addEventListener("click", function () {
					oBox.style["height"] = "300px";	
				}, false);
				
				oH400.addEventListener("click", function () {
					oBox.style.height = "400px";	
				}, false);
				
				oRecovery.addEventListener("click", function () {
					oBox.style.cssText = "width: 100px; height: 100px; background-color: #fff;";
					// 遮罩层关闭
					oMask.style.display = "none";
				}, false);
				
				oSure.onclick = function () {
					oMask.style.display = "none";
				};
			};
		</script>
	</head>
	<body>
		<div class="wrap">
			<h2>请为下面的div设置样式:<button>点击设置</button></h2>
			<div id="box"></div>
		</div>
		<div class="mask">
			<div class="select">
				<ul class="setList">
					<li>
						<span class="title">请选择背景色：</span>
						<span id="red">红</span>
						<span id="yellow">黄</span>
						<span id="blue">蓝</span>
					</li>
					<li>
						<span class="title">请选择宽(px)：</span>
						<span id="w200">200</span>
						<span id="w300">300</span>
						<span id="w400">400</span>
					</li>
					<li>
						<span class="title">请选择高(px)：</span>
						<span id="h200">200</span>
						<span id="h300">300</span>
						<span id="h400">400</span>
					</li>
				</ul>
				<button id="recovery">恢复</button>
				<button id="sure">确定</button>
			</div>
		</div>
	</body>
</html>